<template>
    <div class="Count">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="历史数据" name="1" class="tab1">
                <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
                    <el-tab-pane label="路灯" name="1-1">
                        <el-collapse v-model="activeNames1" @change="handleChange">
                            <el-collapse-item title="路灯列表" name="1">
                                <div>
                                    <el-table :data="tableData1" style="width: 100%" :max-height="260" :header-cell-style="{background:'#F3F4F7'}">
                                        <el-table-column type="index" label="序号" align="center"></el-table-column>
                                        <el-table-column prop="key1" label="编号" align="center"></el-table-column>
                                        <el-table-column prop="key2" label="用电量" align="center"></el-table-column>
                                        <el-table-column prop="key3" label="使用时长" align="center"></el-table-column>
                                        <el-table-column prop="key4" label="设备组" align="center"></el-table-column>
                                        <el-table-column label="操作" align="center">
                                            <el-button type="success" plain>查看</el-button>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>
                    <el-tab-pane label="充电桩" name="1-2">
                        <el-collapse v-model="activeNames1" @change="handleChange">
                            <el-collapse-item title="充电桩列表" name="1">
                                <div>
                                    <el-table :data="tableData3" style="width: 100%" :max-height="260" :header-cell-style="{background:'#F3F4F7'}">
                                        <el-table-column type="index" label="序号" align="center"></el-table-column>
                                        <el-table-column prop="key1" label="编号" align="center"></el-table-column>
                                        <el-table-column prop="key2" label="状态" align="center"></el-table-column>
                                        <el-table-column prop="key3" label="充电次数" align="center"></el-table-column>
                                        <el-table-column prop="key4" label="循环次数" align="center"></el-table-column>
                                        <el-table-column prop="key4" label="设备组" align="center"></el-table-column>
                                        <el-table-column label="操作" align="center">
                                            <el-button type="success" plain>查看</el-button>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>
                </el-tabs>
                <el-tabs v-model="activeName3" type="card" @tab-click="handleClick">
                    <el-tab-pane label="故障预警" name="1-3">
                        <el-collapse v-model="activeNames1" @change="handleChange">
                            <el-collapse-item title="故障预警列表" name="2">
                                <div>
                                    <el-table :data="tableData2" style="width: 100%" :max-height="260" :header-cell-style="{background:'#F3F4F7'}">
                                        <el-table-column type="index" label="序号" align="center"></el-table-column>
                                        <el-table-column prop="key1" label="设备名称" align="center"></el-table-column>
                                        <el-table-column prop="key2" label="编号" align="center"></el-table-column>
                                        <el-table-column prop="key3" label="状态" align="center"></el-table-column>
                                        <el-table-column prop="key4" label="故障次数" align="center"></el-table-column>
                                        <el-table-column prop="key4" label="平均故障" align="center"></el-table-column>
                                        <el-table-column prop="key4" label="设备组" align="center"></el-table-column>
                                        <el-table-column label="操作" align="center">
                                            <el-button type="warning" plain>查看</el-button>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <!-- <el-tab-pane label="图表数据" name="2">图表数据</el-tab-pane> -->
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeName: '1', //tabs
            activeName2: '1-1', //tab
            activeName3: '1-3', //tab
            activeNames1: ['1','2'], //collapse
            tableData1: Array(20).fill({ key1: 'aaa', key2: 'bbb', key3: 'ccc', key4: 'ddd' }),
            tableData2: Array(20).fill({ key1: 'aaa', key2: 'bbb', key3: 'ccc', key4: 'ddd' }),
            tableData3: Array(20).fill({ key1: 'aaa', key2: 'bbb', key3: 'ccc', key4: 'ddd' }),
        }
    },
    methods: {
        handleClick() {
            //切换tabs时触发
        },
        handleChange() {
            //展开列表时触发
        }
    }
}
</script>
<style>
.Count {
    width: 100%;
    height: 100%;
}

.Count .el-tabs {
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.Count .el-tabs .tab1 .el-tabs--card>.el-tabs__header {
    border-bottom: 1px solid rgba(42, 88, 173, .5);
}

.Count .el-tabs .tab1 .el-tabs--card>.el-tabs__header .el-tabs__item {
    background-color: #fff;
    color: rgba(42, 88, 173, 1);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: 1px solid rgba(42, 88, 173, .5);
}

.Count .el-tabs .tab1 .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    background-color: rgba(42, 88, 173, 1);
    color: #fff;
    box-sizing: border-box;
}

.Count .el-tabs .tab1 .el-tabs__header {
    margin: 0;
}

.Count .el-tabs .tab1 .el-collapse .el-collapse-item {
    background-color: #fff;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #E9EEF3;
    border-top: none;
}

.Count .el-tabs .tab1 .el-collapse {
    border: none;
}

.Count .el-tabs .tab1 .el-collapse .el-collapse-item .el-collapse-item__header {
    color: #f88976;
    font-size: 17px;
}

.Count .el-tabs .tab1 .el-collapse .el-collapse-item .el-collapse-item__wrap {
    border: none;
}

.Count .el-tabs .el-table th {
    padding: 5px 0;
}

.Count .el-tabs .el-table td {
    padding: 5px 0;
}

.Count .el-tabs .el-table td .el-button {
    padding: 5px 10px;
    font-size: 13px;
}
</style>